<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>题目二</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <form action="https://home.firefoxchina.cn/" method="get" >
        <p>欢迎注册会员</p>
        <table>
          <tr>
            <th class="right"><label for="phonenum">手机号码：</label></th>
            <th class="left">
              <input
                type="text"
                id="phonenum"
                name="phonenum"
                placeholder="11位手机号"
              />
              <span class="must">必填</span>
            </th>
          </tr>
          <tr>
            <th class="right"><label for="password">创建密码：</label></th>
            <th class="left">
              <input
                type="text"
                id="password"
                name="password"
                placeholder="8位密码"
              />
              <span class="must">必填</span>
            </th>
          </tr>
          <tr>
            <th class="right"><label for="mailbox">注册邮箱：</label></th>
            <th class="left">
              <input
                type="text"
                id="mailbox"
                name="mailbox"
                placeholder="例如：wustzz@sina.com"
              />
              <span class="must">必填</span>
            </th>
          </tr>
          <tr>
            <th class="right"><label for="vercode">验证码：</label></th>
            <th class="left">
              <input type="text" id="vercode" name="vercode" />
              <span
                id="capcha"
                style="
                  display: inline-block;
                  width: 70px;
                  cursor: pointer;
                  background: #9999ff;
                "
              ></span>
              <img
                style="vertical-align: middle; width: 25px; cursor: pointer"
                src="arrow_03.png"
                id="change_capcha"
                alt=""
              />
            </th>
          </tr>
          <tr>
            <th class="right">性别：</th>
            <th class="left">
              <input type="radio" name="sex" value="male" />男
              <input type="radio" name="sex" value="female" />女
            </th>
          </tr>
          <tr>
            <th class="right"><label for="birthday">生日：</label></th>
            <th class="left">
              <input
                type="text"
                id="birthday"
                name="birthday"
                value="年 /月/日"
              />
            </th>
          </tr>
          <tr>
            <th class="right"><label for="age">年龄：</label></th>
            <th class="left">
              <input type="text" id="age" name="age" />
            </th>
          </tr>
          <tr>
            <th class="right"><label for="age">籍贯：</label></th>
            <th class="left">
              <select name="province" size="1" class="jiguan">
                <option value="0" selected="selected">湖北省</option>
                <option value="1">湖南省</option>
                <option value="2">北京省</option>
                <option value="3">上海省</option>
              </select>
              <select name="city" size="1" class="jiguan">
                <option value="0" selected="selected">武汉市</option>
                <option value="1">黄冈市</option>
                <option value="2">襄阳市</option>
                <option value="3">咸宁市</option>
              </select>
            </th>
          </tr>
          <tr>
            <th class="right">个人学历：</th>
            <th class="left">
              <select name="education" size="1" class="xueli">
                <option value="0">小学</option>
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">专科</option>
                <option value="4" selected="selected">本科</option>
                <option value="5">研究生</option>
              </select>
            </th>
          </tr>
          <tr>
            <th class="right">月薪：</th>
            <th class="left">
              <input
                type="range"
                name="salary"
                id="salary"
                min="0"
                max="10000"
                step="50"
                value="5000"
              />
              <span id="msg"></span>
            </th>
          </tr>
          <tr>
            <th class="right">个人爱好：</th>
            <th class="left">
              <label
                ><input type="checkbox" name="like" value="sing" />唱歌</label
              >
              <label
                ><input type="checkbox" name="like" value="run" />跑步</label
              >
              <label
                ><input type="checkbox" name="like" value="swim" />游泳</label
              >
            </th>
          </tr>
          <tr>
            <th class="right">个人照片：</th>
            <th class="left">
              <div
                id="test-image-preview"
                style="
                  border: 1px solid silver;
                  width: 100%;
                  height: 200px;
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                "
              ></div>
              <input
                type="file"
                name="test"
                accept="image/*"
                id="test-image-file"
              />
              <p id="test-file-info"></p>
            </th>
          </tr>
          <tr>
            <th class="right">个人简介：</th>
            <th class="left">
              <textarea name="intro" cols="35" rows="10"></textarea>
            </th>
          </tr>
          <tr>
            <th></th>
            <th class="left">
              <input type="submit" value="提交"  onclick=""/>
              <input type="reset" value="重填" />
            </th>
          </tr>
        </table>
      </form>
    </div>
    <script>
      var msg = document.getElementById("msg");
      window.onload = function () {
        msg.innerHTML = document.getElementById("salary").value;
      };
      document.getElementById("salary").onchange = function () {
        msg.innerHTML = this.value;
      };
      var fileInput = document.getElementById("test-image-file");
      var info = document.getElementById("test-file-info");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        if (!fileInput.value) {
          info.innerHTML = "没有选择文件";
          return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // // 获取File信息:
        // info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        // if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        // alert('不是有效的图片文件!');
        // return;
        // }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： '...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
      let codeStr =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      //验证码长度
      let length = 4;
      let capcha = document.getElementById("capcha");
      let change_capcha = document.getElementById("change_capcha");
      // 用来生成一个[n,m]随机整数
      function getRandom(n, m) {
        return parseInt(Math.random() * (m - n + 1) + n);
      }
      function getCode() {
        let str = "";
        // 验证码有几位就循环几次
        for (let i = 0; i < length; i++) {
          let index = getRandom(0, 61);
          str += codeStr.charAt(index);
          str += " ";
        }
        capcha.innerHTML = str;
        capcha.style.color = "#3333FF";
        capcha.style.fontStyle = "italic";
      }
      // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
      getCode();
      // 点击刷新验证码
      capcha.addEventListener("click", getCode);
      change_capcha.addEventListener("click", getCode);
      function randomColor() {
        var r = parseInt(Math.random() * 256);

        var g = parseInt(Math.random() * 256);

        var b = parseInt(Math.random() * 256);

        var rgb = "rgb(" + r + "," + g + "," + b + ")";

        return rgb;
      }
    </script>
  </body>
</html>
